<div class="clr-row">
  <div class="clr-col-md-auto col1">
    <h1>
      <clr-icon [attr.shape]="design.type.shape" size="48" class="resIcon">
      </clr-icon>
      {{ design.name }} -
      {{ design.type.name }}
      <span *ngIf="design.class">
        {{ design.class.name }}
      </span>
    </h1>
    <div *ngIf="design.editable">
      <clr-alert
        [clrAlertClosable]="false"
        [clrAlertType]="'warning'"
        *ngIf="design.isUpgrading"
      >
        <clr-alert-item>
          <span class="alert-text">
            这个设计已经升级了！
          </span>
        </clr-alert-item>
      </clr-alert>

      <form clr-form>
        <clr-input-container>
          <!-- <label>Name:</label> -->
          <input
            clrInput
            [(ngModel)]="design.editable.name"
            name="name"
            required
          />
          <clr-control-error>必填</clr-control-error>
        </clr-input-container>

        <h4>
          模块:
        </h4>
        <span class="moduleSubTitle"
          >已使用:
          <span
            [ngClass]="{
              'text-danger':
                design.editable.modules.length > design.type.moduleCount
            }"
            >{{ design.editable.modules.length }}/{{ design.type.moduleCount }}
          </span>
        </span>
        <span class="moduleSubTitle">
          点数:
          <span
            [ngClass]="{
              'text-danger':
                design.editable.usedModulePoint > design.type.modulePoint
            }"
            >{{ design.editable.usedModulePoint }}/{{ design.type.modulePoint }}
          </span>
        </span>
        <span class="moduleSubTitle">
          能源:
          <span
            [ngClass]="{
              'text-danger': design.editable.totalEnergy.lt(0)
            }"
          >
            <app-formatted-quantity
              [quantity]="design.editable.totalEnergy"
            ></app-formatted-quantity>
          </span>
        </span>
        <br />

        <table class="table table-noborder table-compact moduleTable">
          <thead>
            <tr>
              <th>模块</th>
              <th>尺寸</th>
              <th>等级</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            <tr
              *ngFor="
                let w of design.editable.modules;
                let i = index;
                trackBy: getModuleId
              "
              [attr.data-index]="i"
            >
              <!-- Module -->
              <td>
                <div class="clr-select-wrapper">
                  <select
                    class="clr-select"
                    [name]="'weap' + i"
                    [(ngModel)]="w.moduleId"
                    (ngModelChange)="reload()"
                  >
                    <optgroup label=" - Weapons - " *ngIf="weapons.length > 0">
                      <option
                        *ngFor="let wt of weapons; trackBy: getModuleId"
                        [ngValue]="wt.id"
                        >{{ wt.name }}</option
                      >
                    </optgroup>
                    <optgroup
                      label=" - Defenses - "
                      *ngIf="defenses.length > 0"
                    >
                      <option
                        *ngFor="let wt of defenses; trackBy: getModuleId"
                        [ngValue]="wt.id"
                        >{{ wt.name }}</option
                      >
                    </optgroup>
                    <optgroup
                      label=" - Damage Reduction - "
                      *ngIf="damageReduction.length > 0"
                    >
                      <option
                        *ngFor="let wt of damageReduction; trackBy: getModuleId"
                        [ngValue]="wt.id"
                        >{{ wt.name }}</option
                      >
                    </optgroup>
                    <optgroup
                      label=" - Generators - "
                      *ngIf="generators.length > 0"
                    >
                      <option
                        *ngFor="let wt of generators; trackBy: getModuleId"
                        [ngValue]="wt.id"
                        >{{ wt.name }}</option
                      >
                    </optgroup>
                    <optgroup label=" - Thrusters - " *ngIf="drives.length > 0">
                      <option
                        *ngFor="let wt of drives; trackBy: getModuleId"
                        [ngValue]="wt.id"
                        >{{ wt.name }}</option
                      >
                    </optgroup>
                    <optgroup label=" - Others - " *ngIf="other.length > 0">
                      <option
                        *ngFor="let wt of other; trackBy: getModuleId"
                        [ngValue]="wt.id"
                        >{{ wt.name }}</option
                      >
                    </optgroup>
                  </select>
                </div>
              </td>
              <!-- Size -->
              <td>
                <div class="clr-select-wrapper">
                  <select
                    *ngIf="w.module"
                    class="clr-select"
                    [name]="'size' + i"
                    [(ngModel)]="w.size"
                    (ngModelChange)="reload()"
                  >
                    <ng-container *ngIf="shipNum < 7; else titanModules">
                      <option
                        *ngFor="let si of w.module.sizes; trackBy: getSizeId"
                        [ngValue]="si"
                        >{{ getSizeName(si) }}
                      </option>
                    </ng-container>
                    <ng-template #titanModules>
                      <option
                        *ngFor="let si of titanSizes; trackBy: getSizeId"
                        [ngValue]="si"
                        >{{ getSizeName(si) }}
                      </option>
                    </ng-template>
                  </select>
                </div>
              </td>
              <!-- Level -->
              <td>
                <div
                  class="clr-control-container"
                  [ngClass]="{ 'clr-error': validateLevel(w) }"
                >
                  <div class="btn-group btn-primary">
                    <button
                      type="button"
                      class="btn  btn-sm btn-outline btn-icon"
                      (click)="w.levelUi = w.levelUi - 1; reload()"
                      [disabled]="w.levelUi <= 10"
                    >
                      <clr-icon shape="minus"></clr-icon>
                    </button>

                    <input
                      class="smallInput clr-input"
                      type="number"
                      required
                      min="10"
                      [(ngModel)]="w.levelUi"
                      [name]="'l' + i"
                      (ngModelChange)="reload()"
                      min="10"
                      [attr.max]="w.maxLevel"
                      required
                    />

                    <button
                      type="button"
                      class="btn  btn-sm btn-outline btn-icon"
                      (click)="w.levelUi = w.levelUi + 1; reload()"
                      [disabled]="w.levelUi >= w.maxLevel"
                    >
                      <clr-icon shape="plus"></clr-icon>
                    </button>
                  </div>
                  <clr-icon
                    class="clr-validate-icon"
                    shape="exclamation-circle"
                  ></clr-icon>
                </div>
              </td>
              <!-- Remove -->
              <td>
                <button
                  type="button"
                  class="btn btn-warning btn-sm btn-icon noTopMargin"
                  (click)="removeModule(i)"
                >
                  <clr-icon shape="trash"></clr-icon>
                </button>
              </td>
            </tr>
          </tbody>
        </table>

        <br />

        <div *ngIf="!design.editable.isValid; else upgradeAlert">
          <clr-alert [clrAlertType]="'danger'" [clrAlertClosable]="false">
            <clr-alert-item>
              <span class="alert-text">
                这个设计无效！
                <ng-container
                  *ngIf="
                    design.editable.modules.length > design.type.moduleCount
                  "
                >
                  <br />
                  太多模块了
                </ng-container>
                <ng-container
                  *ngIf="
                    design.editable.usedModulePoint > design.type.modulePoint
                  "
                >
                  <br />
                  太多模块点数了
                </ng-container>
                <ng-container *ngIf="design.editable.totalEnergy.lt(0)">
                  <br />
                  没有足够的能源
                </ng-container>
              </span>
            </clr-alert-item>
          </clr-alert>
          <br />
        </div>

        <ng-template #upgradeAlert>
          <div *ngIf="design.editable.upgradePrice.gt(0)">
            <clr-alert [clrAlertType]="'info'" [clrAlertClosable]="false">
              <clr-alert-item>
                <span class="alert-text">
                  升级将会花费:
                  <app-price-line
                    [unit]="ms.game.resourceManager.shipyardProgress"
                    [canBuy]="true"
                    [price]="design.editable.upgradePrice"
                  ></app-price-line>
                </span>
              </clr-alert-item>
            </clr-alert>
            <br />
          </div>
        </ng-template>
      </form>
      <clr-button-group class="btn-primary">
        <clr-button
          class="btn btn-outline"
          (click)="addModule()"
          [disabled]="design.editable.modules.length >= design.type.moduleCount"
        >
          <clr-icon shape="plus"></clr-icon>
          新增
        </clr-button>
        <clr-button class="btn btn-outline" (click)="maxAll()">
          <clr-icon shape="angle"></clr-icon>
          最大
        </clr-button>
        <clr-button
          *ngIf="design.quantity.lt(1); else upgradeBtn"
          class="btn btn"
          [disabled]="!design.editable.isValid || design.isUpgrading"
          (click)="save()"
          ><clr-icon shape="floppy"></clr-icon>保存</clr-button
        >
        <ng-template #upgradeBtn>
          <clr-button
            class="btn btn"
            [disabled]="!design.editable.isValid || design.isUpgrading"
            (click)="save()"
            ><clr-icon shape="angle-double"></clr-icon>升级</clr-button
          >
        </ng-template>
        <clr-button
          class="btn btn-success"
          [disabled]="changed"
          (click)="revert()"
          ><clr-icon shape="undo"></clr-icon>取消</clr-button
        >
        <clr-button class="btn btn-warning" (click)="deleteModal = true"
          ><clr-icon shape="trash"></clr-icon>删除</clr-button
        >
      </clr-button-group>
    </div>
  </div>

  <div class="clr-col-md-auto col2">
    <app-view [design]="design" [showDifference]="true"></app-view>
  </div>
</div>

<clr-modal [(clrModalOpen)]="deleteModal">
  <h3 class="modal-title">删除飞船设计</h3>
  <div class="modal-body">
    <p>删除此飞船设计和所有飞船？</p>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-outline" (click)="deleteModal = false">
      取消
    </button>
    <button type="button" class="btn btn-warning" (click)="deleteDesign()">
      删除
    </button>
  </div>
</clr-modal>
